<script setup>
import api from "./api"
import { ElMessage } from "element-plus"
const emit = defineEmits(["update:modelValue", "submit"])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  selectIds: {
    type: Array,
    default: () => [],
  },
})

const form = ref({
  wms_attribute: [],
  warehouse_name: "",
})
const tableData = ref([])
const tableRef = ref([])
const optionList = ref({
  wms_attribute: [],
})
const pager = reactive({
  totalResult: 1,
  currentPage: 1,
  pageSize: 10,
})

const checkboxConfig = reactive({
  reserve: true,
})

const initData = (query = {}) => {
  api.apiGetWarehouseList({ ...query, ...form.value }).then(({ total, data: list }) => {
    tableData.value = list
    pager.totalResult = total
    if (query.pageNumber) {
      pager.pageNum = query.pageNum
      pager.pageSize = query.pageSize
    }
  })
}

const handleSearch = () => {
  initData({ pageNum: 1, pageSize: pager.pageSize })
}

const handleDialogOk = () => {
  const checkedRecords = tableRef.value.getCheckboxRecords()
  if (!checkedRecords.length) {
    return ElMessage({ message: "最少选中一条数据！", type: "error" })
  }
  emit("submit", checkedRecords)
  handleClose()
}

const radioConfig = reactive({
  reserve: true,
  checkMethod({ row }) {
    const { selectIds = [] } = props
    return !selectIds.includes(row.sku)
  },
})

const initOptionList = async () => {
  const res = await api.apiGetWarehouseEnum()

  const { wms_attribute } = res.data
  optionList.value.wms_attribute = wms_attribute
}

onMounted(() => {
  initData()
  initOptionList()
})

const pageChange = () => {
  initData({ pageNum: pager.currentPage, pageSize: pager.pageSize })
}

watch(
  () => props.selectIds,
  (list) => {
    checkboxConfig.checkRowKeys = list
  },
  { deep: true, immediate: true }
)

const handleClose = () => {
  emit("update:visible", false)
}
</script>

<template>
  <el-dialog :model-value="visible" draggable ref="tableRef" :close-on-click-modal="false" title="添加发货仓库" @close="handleClose" align-center destroy-on-close width="800px">
    <div class="search mb-4 mt-4 flex">
      <el-space>
        <VXSelect placeholder="仓库类型" clearable filterable v-model="form.wms_attribute" style="width: 240px" multiple :list="optionList.wms_attribute" collapse-tags />
        <el-input style="width: 240px" clearable v-model="form.warehouse_name" placeholder="仓库名称" />
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-space>
    </div>
    <vxe-table
      ref="tableRef"
      row-id="id"
      :checkbox-config="checkboxConfig"
      :height="300"
      :column-config="{ resizable: true }"
      :row-config="{ keyField: 'id', isHover: true }"
      :data="tableData"
      :radio-config="radioConfig"
    >
      <vxe-column type="checkbox" width="50" />
      <vxe-column title="仓库类型" field="wms_attribute_cn" />
      <vxe-column title="仓库名称" field="warehouse_name" />
    </vxe-table>
    <template #footer>
      <div>
        <vxe-pager
          :border="false"
          perfect
          v-model:current-page="pager.currentPage"
          v-model:page-size="pager.pageSize"
          :total="pager.totalResult"
          :page-sizes="[10, 20, 100]"
          @page-change="pageChange"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        >
        </vxe-pager>
      </div>
      <div>
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleDialogOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
